<template>
  <div class="wrap flex grow column">
    <div class="topbar flex shrink column">
      <div class="flex grow">
        <span class="square square1"></span>
        <span class="square square2"></span>
        <div class="flex img0 grow"></div>

        <img
          :src="PIC_URL + '/tlbypcWeb/paidService/jiao_l.png'"
          class="img1"
        />
        <div class="flex bar grow">
          <Title v-bind="$attrs"></Title>
        </div>
        <img
          :src="PIC_URL + '/tlbypcWeb/paidService/jiao_r.png'"
          class="img2"
        />
        <div class="flex img3 grow"></div>
      </div>
    </div>
    <div class="slotox flex grow column">
      <span class="square square3"></span>
      <span class="square square4"></span>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import Title from "./Title";
export default {
  components: { Title },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped lang="scss">
$bg: rgba(8, 18, 39, 0.56);
.wrap {
  min-width: 277px;
  .slotox {
    height: calc(100% - 52px);
    position: relative;
    border-left: 2px solid;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-image: linear-gradient(
        0deg,
        rgba(49, 121, 229, 0.41),
        rgba(41, 90, 189, 0.41),
        rgba(0, 83, 235, 0.41)
      )
      2 2;
    background: $bg;
    box-shadow: inset 0 0, inset 25px -14px 12px -18px rgba(16, 53, 142, 0.4),
      inset -25px -14px 12px -18px rgba(16, 53, 142, 0.4),
      inset 0 -25px 12px -18px rgba(16, 53, 142, 0.4);
    .square {
      position: absolute;
      width: 16px;
      height: 16px;
      display: inline-block;
      &.square3 {
        background: url($PIC_URL + "/tlbypcWeb/paidService/zuoxia.png")
          no-repeat left bottom;
        bottom: -2px;
        left: -2px;
      }
      &.square4 {
        background: url($PIC_URL + "/tlbypcWeb/paidService/youxia.png")
          no-repeat right bottom;
        bottom: -2px;
        right: -2px;
      }
    }
  }
  .topbar {
    display: flex;
    position: relative;
    .square {
      position: absolute;
      width: 16px;
      height: 16px;
      &.square1 {
        background: url($PIC_URL + "/tlbypcWeb/paidService/zuoshang.png")
          no-repeat left top;
        top: 0;
        left: 0;
      }
      &.square2 {
        background: url($PIC_URL + "/tlbypcWeb/paidService/youshang.png")
          no-repeat right top;
        top: 0;
        right: 0;
      }
    }
    .img0 {
      min-width: 21px;
      max-width: 111px;
      border-top: 2px solid;
      background: url($PIC_URL + "/tlbypcWeb/paidService/jiaobg.png") no-repeat
        left;
      border-left: 2px solid;
      border-image: linear-gradient(
          -90deg,
          rgba(49, 121, 229, 0.41),
          rgba(41, 90, 189, 0.41),
          rgba(0, 83, 235, 0.41)
        )
        2 2;
    }
    .img3 {
      min-width: 21px;
      max-width: 111px;
      border-top: 2px solid;
      border-right: 2px solid;
      background: url($PIC_URL + "/tlbypcWeb/paidService/rightbg.png") no-repeat
        right;
      border-image: linear-gradient(
          90deg,
          rgba(49, 121, 229, 0.41),
          rgba(41, 90, 189, 0.41),
          rgba(0, 83, 235, 0.41)
        )
        2 2;
    }
    .bar {
      background: url($PIC_URL + "/tlbypcWeb/paidService/title_light.png")
        center top;
      background-repeat: repeat no-repeat;
      background-size: auto 104%;
      min-width: 102px;
      justify-content: center;
    }
  }
}
</style>
